<template>
  <div>
    <h2>子组件中</h2>
    <input type="text" :value="modelValue" @input="updateValue($event.target.value)" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义props，接收来自父组件的modelValue
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

// 定义emits，向父组件发送更新事件
const emit = defineEmits(['update:modelValue'])

// 当输入框的值发生变化时，触发update:modelValue事件
const updateValue = (newValue) => {
  emit('update:modelValue', newValue)
}
</script>
